/**
 * 学习目标：JSX的使用注意事项
 */
import React from 'react';
import ReactDOM from 'react-dom';

const divNode = (
  // 1. JSX必须要有一个根节点， `👍<></>` 等同于 `<React.Fragment></React.Fragment>`
  <>
    <ul className="list">
      <li>苹果</li>
      <li>香蕉</li>
      <li>西瓜</li>
    </ul>
    <ul>
      <li>西瓜</li>
      <li>香蕉</li>
      <li>苹果</li>
    </ul>
    {/*  2 没有子节点的元素可以使用`/>`结束 */}

    {/* 3.JS与html有关键字冲突： class for
   3.1. `class` =====> `className`
   3.2. `for`========>  `htmlFor` */}
    <label htmlFor="ipt">点我</label>
    <input id="ipt" type="text" />
  </>
);
// 4. JSX可以换行，如果JSX有多行，推荐使用`()`包裹JSX，防止自动插入分号的bug

ReactDOM.render(divNode, document.getElementById('root'));
